<html>
<head>
<title>微信支付</title>
<script type="text/javascript" src="../vue/vue.min.js"></script>
<script type="text/javascript" src="../vue/vue-resource.min.js" ></script>
<script src="../qirous/qrious.min.js"></script>
<script type="text/javascript" src="../js/textColor.js"></script>
</head>
<body style="text-align: center;margin: auto 0;">
	
	<div id="app" style="text-align: center;">
		
		<div style="text-align: center;width: 100%;">
			<h1 >{{text}}</h1>
		</div>
		
		<div v-if="show==0">
			金额：<input type="text" placeholder="请输入金额" v-model="amount" />
			<input type="button" value="支付" @click="pay()" />
			<input type="button" value="取消" onclick="location.reload()" /><br><br>
			<span v-if="out_trade_no!=null">您本次的订单号是：{{out_trade_no}}</span>
			<span style="font-weight: 700;color: red;">{{payStatus}}</span>
			<br>
			<img id="qrious" >
		</div>
		<div v-if="show==1">
			<h1 id="text"  style="color: red;font-weight: bolder;font-size: 80px;">{{payStatus}}</h1>
			{{count}}秒后返回主页
		</div>
		
	</div>

</body>
<script>
	
	new Vue({
		el:"#app",
		data:{
			text:" 欢 迎 使 用 微 信 支 付 小 程 序     <--->",
			timer:null,
			
			amount:"",
			out_trade_no:null,
			payStatus:null,
			show:0,
			// 定时器
			intervalBtn:{},
			intervalText:{},
			count:5
		},
		methods:{
			pay(){
				if(parseInt(this.amount) > 0 && parseInt(this.amount.substring(0,1)) > 0) {
					this.$http.get("http://localhost:9000/pay/weixinPay?amount="+this.amount).then(function(obj){
						console.log(obj.body);
						var url = '';
						url = obj.body.code_url;
						this.out_trade_no = obj.body.out_trade_no;
						
						var qr = new QRious({
						   element:document.getElementById('qrious'),
						   size:250, 	   
						   level:'H',	   
						   value:url
						});
						
						this.intervalBtn = setInterval(() => {
							this.$http.get("http://localhost:9000/query/queryStatus?orderId="+this.out_trade_no).then(function(obj){
								this.payStatus = obj.body.trade_state_desc;
								if(this.payStatus != "订单未支付" && this.payStatus != null) {
									//清楚定时器
									clearInterval(this.intervalBtn);
									this.show = 1;
									
									this.intervalText = setInterval( () => {
										this.count--;
										
										if(this.count < 0) {
											clearInterval(this.intervalText);
											location.reload();
										}
									},1000)
								}
							})
						}, 1000);
					})
				}else{
					alert("请输入合法的金额");
					location.reload();
				}
			}
			
		},
		created() {
			if(this.timer != null){
			    return;
			}
			this.timer = setInterval(()=>{
			       let start = this.text.substring(0,1);//截取下标为0的字符串
			       let end = this.text.substring(1);//截取从下标为1到结束的字符串
			       this.text = end + start;
			},350);
		}
	});

	

	
</script>
</html>